<template>
	<view class="body">
		<view class="top">
			<view class="top2">
				<image class="icon1" src="../../static/icons/chat.png" mode=""></image>
				<image class="icon2" src="../../static/icons/search.png" mode=""></image>
				<image class="icon3" src="../../static/icons/cart.png" mode=""></image>
			</view>
		</view>
		
		<view class="logo1" v-for="(item,index) in list" :key="item.id" @tap="golist(item.id)">
			<view class="p1">
				{{item.ctitle}}
			</view>
			<view class="p2">
			{{item.etitle}}
			</view>
			<image :src="item.img" mode=""></image>
			
		</view>
			
			
			<view class="logo1 w" v-for="item in list2" :key="item.id" @tap="golist2(item.id)">
				<view class="p1">
					{{item.ctitle}}
				</view>
				<view class="p2">
					{{item.etitle}}
				</view>
				<image :src="item.img" mode=""></image>
				
			</view>
			
			
			<view class="xia">
				
				<view class="logo2" v-for="item in list3" :key="item.id" @tap="golist3(item.id)">
				<image :src="item.img" mode=""></image>
				<view class="p1">
					{{item.ctitle}}
				</view>
				<view class="p2">
					{{item.etitle}}
				</view>
			</view>
			
			
			
			<view class="logo2 w" v-for="item in list4" :key="item.id" @tap="golist4(item.id)">
				<image :src="item.img" mode=""></image>
				<view class="p1">
					{{item.ctitle}}
				</view>
				<view class="p2">
					{{item.etitle}}
				</view>
			</view>
				
			</view>
			
	
		
		<view class="bai">
			
		</view>
	</view><!-- body -->
</template>

<script>
	import {
		kind
	} from "../../util/kind/kind.js"
	export default {
		data() {
			return {
				list:[], 
				list2:[],
				list3:[],
				list4:[],
			};
		},
		
		methods:{
			golist(val){
				uni.navigateTo({
					url:`./list/list?id=${val}`
				})
			},
			
			golist2(val){
				uni.navigateTo({
					url:`./list/list?id=${val}`
				})
			},
			
			golist3(val){
				uni.navigateTo({
					url:`./list/list?id=${val}`
				})
			},
			
			
			golist4(val){
				uni.navigateTo({
					url:`./list/list?id=${val}`
				})
			}
		},
		onLoad() {
			kind().then(res =>{
				console.log(res)
				this.list.push(res.data.data[0])
				this.list2.push(res.data.data[1])
				this.list3.push(res.data.data[2])
				this.list4.push(res.data.data[3])
			})
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.body {
	
		background-color: #F1ECE7;
		width: 100%;
		height: 100%;
	}
	
	
.top{
	background: #354E44;
	width: 100%;
	height: 208rpx;
}

.top2 {
		width: calc(100%-60rpx);
		height: 45rpx;
		position: absolute;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		top: 90rpx;
		left: 0;

		.icon1 {
			width: 42rpx;
			height: 42rpx;
		}

		.icon2 {
			width: 36rpx;
			height: 36rpx;
			margin-left: 540rpx;
		}

		.icon3 {
			width: 34rpx;
			height: 30rpx;
			margin-left: 36rpx;
		}
	}
	
	.logo1.w{
		background: #FFFFFF;
		image{
			position: absolute;
			margin: 0;
			left: 178rpx;
			width: 492rpx;
			height: 302rpx;
		}
		
	}
	.logo1{
		position: relative;
		display: flex;
		width: 670rpx;
		height: 302rpx;
		border-radius: 20rpx;
		background: #D5D5D5;
		margin: 0 auto;
		margin-top: 64rpx;
		image{
			width: 416rpx;
			height: 252rpx;
			margin-left: 254rpx;
			margin-top: 50rpx;
			
		}
		
		.p1{
			
			position: absolute;
			font-size: 48rpx;
			font-weight: bold;
			color: #3E3E3E;
			left: 52rpx;
			top: 148rpx;
			z-index: 999;
		}
		.p2{
			position: absolute;
			font-size: 30rpx;
			color: #7F7F7F;
			left: 52rpx;
			top: 220rpx;
			z-index: 999;
		}
	}
	
	.xia{
		display: flex;
	}
	
	.logo2.w{
		margin: 0;
		margin-top: 48rpx;
		image{
			width: 100%;
			height: 100%;
			top: 0;
		}
	}
	.logo2{
		position: relative;
		width: 312rpx;
		height: 442rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 48rpx 46rpx 126rpx 40rpx;
		image{
			position: absolute;
			width: 312rpx;
			height: 392rpx;
			top: 50rpx;
			
		}
		
		.p1{
			position: absolute;
			left: 52rpx;
			top: 230rpx;
			font-size: 48rpx;
			color: #3E3E3E;
			font-weight: bold;
		}
		
		.p2{
			position: absolute;
			left: 52rpx;
			top: 302rpx;
			font-size: 30rpx;
			color: #7F7F7F;
		}
	}
	
	
	
	
	
	.bai{
		background-color: #F1ECE7;
		width: 100%;
		height: 50rpx;
	}
</style>
